<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name='TTUNION_verify' content='b846c3c2b85efabc496d2a2b8399cd62'>
	<meta name="sogou_site_verification" content="gI1bINaJcL"/>
	<meta name="360-site-verification" content="37ae9186443cc6e270d8a52943cd3c5a" />
	<meta name="baidu_union_verify" content="99203948fbfbb64534dbe0f030cbe817">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no">

	<title>登录页面</title>

	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/home.css">
	
</head>
<body>

	<header class="aui-header">
		<div class="aui-header-box">
			<h1>
				<a href="login.html" class="aui-header-box-logo"></a>
			</h1>
		</div>
	</header>

	<section class="aui-content">
		<div class="aui-content-box clearfix">
			<div class="aui-content-box-fl">
				<div class="aui-form-header">
					<div class="aui-form-header-item on">密码登录</div>
					<div class="aui-form-header-item">验证码登录</div>
					<span class="aui-form-header-san"></span>
				</div>
				<div class="aui-form-content">
					<div class="aui-form-content-item">
						<form action="">
							<div class="aui-form-list">
								<input type="text" class="aui-input" name="" id="username" placeholder="请输入用户名" data-required="required" autocomplete="off">
							</div>
							<div class="aui-form-list">
								<input type="password" class="aui-input" name="" id="password" placeholder="请输入密码" data-required="required" autocomplete="off">
							</div>
							<div class="aui-form-pwd clearfix">
								<a href="#">忘记密码？</a>
							</div>
							<div class="aui-form-btn">
								<input type="submit" id="loginButton" class="aui-btn" value="登&nbsp;录" onclick="return false">
							</div>
						</form>
					</div>
					<div class="aui-form-content-item">
						<form action="">
							<div class="aui-form-list">
								<input type="text" class="aui-input" name="" id="phone" placeholder="请输入手机号" data-required="required" autocomplete="off">
							</div>
<!--							<div class="aui-form-list">-->
<!--								<input type="text" class="aui-input" name="" placeholder="请证明你不是机器人" data-required="required" autocomplete="off">-->
<!--								<a href="#" class="aui-child aui-child-img">-->
<!--									<img src="img/yzm.png" alt="">-->
<!--								</a>-->
<!--							</div>-->
							<div class="aui-form-list">
								<input type="text" class="aui-input" name="" id="inputCode" placeholder="请输入验证码" data-required="required" autocomplete="off">
								<input type="button" class="aui-child" id="sendCode" value="获取验证码" onclick="return false">
							</div>
							<div class="aui-form-pwd clearfix">
								<a href="#">忘记密码？</a>
							</div>
							<div class="aui-form-btn">
								<input type="submit" class="aui-btn" id="codeLogin" value="登&nbsp;录" onclick="return false">
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="aui-content-box-fr">
				<div class="aui-content-box-text">
					<h3>还没有帐号:</h3>
					<a href="register.html" class="aui-ll-link">立即注册</a>
<!--					<h3>使用第三方帐号直接登录:</h3>-->
<!--					<ul class="aui-content-box-text-link clearfix">-->
<!--						<li><a href="#" class="aui-icon-sina"   title="使用新浪微博帐号登录"></a></li>-->
<!--						<li><a href="#" class="aui-icon-wechat" title="使用微信帐号登录"></a></li>-->
<!--						<li><a href="#" class="aui-icon-qq"     title="使用腾讯QQ帐号登录"></a></li>-->
<!--						<li><a href="#" class="aui-icon-baidu"  title="使用百度帐号登录"></a></li>-->
<!--					</ul>-->
				</div>
			</div>
		</div>
	</section>

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="jquery/jquery-3.5.1.js"></script>
	<script type="text/javascript">
        $(function(){

			/*tab标签切换*/
            function tabs(tabTit,on,tabCon){
                $(tabCon).each(function(){
                    $(this).children().eq(0).show();

                });
                $(tabTit).each(function(){
                    $(this).children().eq(0).addClass(on);
                });
                $(tabTit).children().click(function(){
                    $(this).addClass(on).siblings().removeClass(on);
                    var index = $(tabTit).children().index(this);
                    $(tabCon).children().eq(index).show().siblings().hide();
                });
            }
            tabs(".aui-form-header","on",".aui-form-content");

        })
	</script>
	<script>
		$("#loginButton").click(function(){
			$.ajax({
				url:"/Login",
				type:"post",
				contentType:"application/json;charset=utf-8",
				data:JSON.stringify({
					username:$("#username").val(),
					password:$("#password").val()
				}),
				success: function (response) {
					alert(response.msg);
					if (response.code == 200) {
						localStorage.setItem("user", JSON.stringify(response.data));
						window.location.href = "index.html";
					}
					// console.log("数据: " + response);
				},
				error:function (response){
					alert("服务器异常，请稍后重试！" + response);
				}
			});
		});

		$("#sendCode").click(function(){
			$.ajax({
				url:"/sendCode",
				type:"post",
				data:{
					phone:$("#phone").val(),
				},
				success: function (response) {
					alert(response.msg);
				},
				error:function (response){
					alert("服务器异常，请稍后重试！" + response);
				}
				// ,success: function(layero) {
				// 	$("#edit_username").val(data.username);
				// }
			});
		});

		$("#codeLogin").click(function(){
			$.ajax({
				url:"/codeLogin",
				type:"post",
				data:{
					phone:$("#phone").val(),
					inputCode:$("#inputCode").val(),
				},
				success: function (response) {
					console.log(response.code);
					alert(response.msg);
					if (response.code == 200) {
						localStorage.setItem("user", JSON.stringify(response.data));
						window.location.href = "index.html";
					}
					// console.log("数据: " + response);
				},
				error:function (response){
					alert("服务器异常，请稍后重试！" + response);
				}
			});
		});
	</script>

</body>
</html>